<template>
    <div>
        <h2>{{ msg }}</h2>
        <h2>{{ msg.split('').reverse().join('') }}</h2>
        <h2>{{ reMsgF() }}</h2>
        <h2>{{ reMsg }}</h2>
        <input v-model="msg">
    </div>
</template>

<script>
import { ref,computed,watch } from "vue"
export default {
    setup() {
        const msg = ref("Hallo Vue");
        console.log(msg)
        function reMsgF() {
            console.log("触发reMsgF")
            return msg.value.split('').reverse().join('');
        }
        const reMsg = computed(() => {
            console.log("触发reMsgF")
            return msg.value.split('').reverse().join('');
        })
        watch (msg,(newValue,oldValue)=>{
            console.log(111);
        })
        return{
            msg,
            reMsgF,
            reMsg
        }
        
    }
}
</script>
